import { lightenDarkenColor } from 'src/utils/utils';
export const SKIN_VARS = [
  '@primary-color',
  '@link-color',
  '@success-color',
  '@warning-color',
  '@error-color',
  '@heading-color',
  '@text-color',
  '@text-color-secondary',
  '@disabled-color',
  '@border-radius-base',
  '@border-color-base',
  '@border-color-split',
  '@border-color-inverse',
  '@box-shadow-base',
  '@primary-1',
  '@primary-2',
  '@background-color-light',
  '@layout-sider-background',
  '@layout-body-background',
  '@layout-header-background',
  '@flow-menu-color',
  '@item-hover-bg',
  '@menu-dark-bg',
  '@menu-dark-submenu-bg',
  '@menu-dark-item-active-bg',
  '@menu-dark-color',
  '@menu-dark-arrow-color',
  '@table-bg',
  '@table-header-bg',
  '@table-header-color',
  '@table-header-sort-bg',
  '@table-body-sort-bg',
  '@table-row-hover-bg',
  '@table-selected-row-bg',
  '@table-expanded-row-bg',
  '@form-item-margin-bottom',
  '@label-color',
  '@input-height-base',
  '@input-height-lg',
  '@input-placeholder-color',
  '@input-color',
  '@input-icon-color',
  '@input-disabled-bg',
  '@input-addon-bg',
  '@checkbox-check-color',
  '@calendar-border-color',
  '@padding-lg',
  '@screen-xl',
  '@screen-xl-min',
  '@btn-height-base',
  '@btn-disable-bg',
  '@btn-disable-color',
  '@btn-disable-borde',
  // costomer
  '@flow-menu-color',
  '@inner-content-bg',
  '@component-background',
  '@breadcrumb-bg',
  '@breadcrumb-color',
  '@breadcrumb-color-second',
  '@breadcrumb-border-color',
  '@text-color-secondary-dark',
  '@text-color-light-2',
  '@text-color-light-4',
  '@modal-color',
  '@modal-heading-color',
  '@color-light',
  '@color-light-2',
  '@color-light-3',
  '@color-light-4',
  '@color-light-5',
  '@color-light-6',
  '@color-light-7',
  '@color-light-8',
  '@color-light-9',
  '@color-light-10',
  '@color-light-11',
  '@color-light-12',
  '@color-light-13',
  '@color-light-14',
  '@color-light-15',
  '@color-light-16',
  '@color-light-17',
  '@color-dark',
  '@color-primary-secend',
  '@primary-color-2',
  '@primary-color-3',
  '@primary-color-4',
  '@primary-color-5',
  '@primary-color-6',
  '@link-color-2',
  '@text-color-2',
  '@text-color-light-3',
  '@disabled-color-2',
  '@border-color-base-2',
];

export const NORMAL_UNCHANGE_COLOR = {
  '@color-light': '#ffffff',
  '@color-light-2': '#f8f8f8',
  '@color-light-3': '#cccccc',
  '@color-light-4': '#666666',
  '@color-light-5': '#333333',
  '@color-light-6': '#999999',
  '@color-light-7': '#eeeeee',
  '@color-light-8': '#e2e2e2',
  '@color-light-9': '#dddddd',
  '@color-light-10': '#e8e8e8',
  '@color-light-11': '#999',
  '@color-light-12': '@color-light-4',
  '@color-light-13': '@background-color-light',
  '@color-light-14': '#e6e6e6',
  '@color-light-15': '#bbbbbb',
  '@color-light-16': '#f8f8f8',
  '@color-light-17': '#f3f3f3',
  '@color-dark': '#000000',
  '@color-primary-secend': '@color-dark',
  '@border-color-base-2': '#000000',
  '@border-radius-base': 0,
  '@component-background': '#ffffff',
  '@table-header-bg': '#ffffff',
};

export class Skin {
  constructor({ skinColor, fontColor, prColor }) {
    this.skinVars = {};
    this.fontVars = {};
    this.prVars = {};

    this.getSkin(skinColor);
    this.getFont(fontColor);
    this.getPrimary(prColor);
  }

  getColor(color) {
    const light_color_2 = lightenDarkenColor(color, 150);
    const light_color = lightenDarkenColor(color, 20);
    const dark_color = lightenDarkenColor(color, -20);
    const dark_color_2 = lightenDarkenColor(color, -60);
    return { light_color, dark_color, dark_color_2, light_color_2 };
  }
  getSkin(color) {
    const { light_color, dark_color, dark_color_2, light_color_2 } = this.getColor(color);
    this.skinVars = {
      '@layout-header-background': color,
      '@layout-sider-background': color,
      '@item-hover-bg': light_color_2,
      '@menu-dark-bg': color,
      '@menu-dark-submenu-bg': dark_color,
      '@menu-dark-item-active-bg': dark_color,
      '@color-split-l': dark_color,
      '@color-split-r': dark_color_2,
      '@login-area-bg-start': dark_color,
      '@login-area-bg-end': light_color,
      '@login-area-bg-light': lightenDarkenColor(color, 40),
    };
  }
  getFont(color) {
    this.fontVars = {
      '@menu-dark-color': lightenDarkenColor(color, 40),
      '@menu-dark-highlight-color': lightenDarkenColor(color, 100),
      '@text-hd-color': color,
      '@text-hd-color-light': lightenDarkenColor(color, 200),
      '@menu-dark-arrow-color': color,
    };
  }
  getPrimary(color) {
    this.prVars = {
      '@primary-color': color,
    };
  }
  changeLess() {
    window.less
      .modifyVars({ ...NORMAL_UNCHANGE_COLOR, ...this.skinVars, ...this.fontVars, ...this.prVars })
      .then(() => {
        console.log('改了？');
      })
      .catch((error) => {
        console.log(error, `Failed to update theme`);
      });
  }
}
